<template>
	<view
		class="uni-calendar-item__weeks-box"
		:class="{
			'uni-calendar-item--disable': weeks.disable,
			'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
			'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
			'uni-calendar-item--before-checked': weeks.beforeMultiple,
			'uni-calendar-item--multiple': weeks.multiple,
			'uni-calendar-item--after-checked': weeks.afterMultiple
		}"
		@click="choiceDate(weeks)"
	>
		<view class="uni-calendar-item__weeks-box-item" v-if="(weeks.extraInfo&&weeks.extraInfo.state)">
			<view class="uni-calendar__clock" :style="'background-color:'+bg_color[weeks.extraInfo.state]">
				<image src="../../static/icon/Vector.png" mode=""></image>
			</view>
		</view>
		<view class="uni-calendar-item__weeks-box-item" v-if="!(weeks.extraInfo&&weeks.extraInfo.state)">
			<text v-if="selected && weeks.extraInfo " class="uni-calendar-item__weeks-box-circle"></text>
			<text
				class="uni-calendar-item__weeks-box-text"
				:class="{
					'uni-calendar-item--isDay-text': weeks.isDay,
					'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
					'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
					'uni-calendar-item--before-checked': weeks.beforeMultiple,
					'uni-calendar-item--multiple': weeks.multiple,
					'uni-calendar-item--after-checked': weeks.afterMultiple,
					'uni-calendar-item--disable': weeks.disable
				}"
			>
				{{ weeks.date }}
			</text>
			<text
				v-if="!lunar && !weeks.extraInfo && weeks.isDay"
				class="uni-calendar-item__weeks-lunar-text"
				:class="{
					'uni-calendar-item--isDay-text': weeks.isDay,
					'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
					'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
					'uni-calendar-item--before-checked': weeks.beforeMultiple,
					'uni-calendar-item--multiple': weeks.multiple,
					'uni-calendar-item--after-checked': weeks.afterMultiple
				}"
			>
				今天
			</text>
			<text
				v-if="lunar && !weeks.extraInfo"
				class="uni-calendar-item__weeks-lunar-text"
				:class="{
					'uni-calendar-item--isDay-text': weeks.isDay,
					'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
					'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
					'uni-calendar-item--before-checked': weeks.beforeMultiple,
					'uni-calendar-item--multiple': weeks.multiple,
					'uni-calendar-item--after-checked': weeks.afterMultiple,
					'uni-calendar-item--disable': weeks.disable
				}"
			>
				{{ weeks.isDay ? '今天' : weeks.lunar.IDayCn === '初一' ? weeks.lunar.IMonthCn : weeks.lunar.IDayCn }}
			</text>
			<text
				v-if="lunar && weeks.extraInfo"
				class="uni-calendar-item__weeks-lunar-text"
				:class="{
					'uni-calendar-item--isDay-text': weeks.isDay,
					'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
					'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
					'uni-calendar-item--before-checked': weeks.beforeMultiple,
					'uni-calendar-item--multiple': weeks.multiple,
					'uni-calendar-item--after-checked': weeks.afterMultiple,
					'uni-calendar-item--disable': weeks.disable
				}"
			>
				{{ !weeks.extraInfo.info?(weeks.isDay ? '今天' : weeks.lunar.IDayCn === '初一' ? weeks.lunar.IMonthCn : weeks.lunar.IDayCn):'' }}
			</text>
			<text
				v-if="weeks.extraInfo && weeks.extraInfo.info"
				class="uni-calendar-item__weeks-lunar-text"
				:class="{
					'uni-calendar-item--extra': weeks.extraInfo.info,
					'uni-calendar-item--isDay-text': weeks.isDay,
					'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay,
					'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && !weeks.isDay,
					'uni-calendar-item--before-checked': weeks.beforeMultiple,
					'uni-calendar-item--multiple': weeks.multiple,
					'uni-calendar-item--after-checked': weeks.afterMultiple,
					'uni-calendar-item--disable': weeks.disable
				}"
			>
				{{ weeks.extraInfo.info }}
			</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bg_color:[null,'#FB6290','#FFBE27','#B8DC84']
		};
	},
	props: {
		weeks: {
			type: Object,
			default() {
				return {};
			}
		},
		calendar: {
			type: Object,
			default: () => {
				return {};
			}
		},
		selected: {
			type: Array,
			default: () => {
				return [];
			}
		},
		lunar: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		choiceDate(weeks) {
			this.$emit('change', weeks);
		}
	}
};
</script>

<style lang="scss" scoped>
	.uni-calendar__clock{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		background-color: #FB6290;
		// background: linear-gradient(95.48deg, #A0D05B 25.47%, #B8DC84 168.35%);
		border-radius: 25rpx;
	}
	.uni-calendar__clock image{
		width: 12px;
		height: 8px;
	}
.uni-calendar-item__weeks-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.uni-calendar-item__weeks-box-text {
	font-size: $uni-font-size-base;
	color: $uni-text-color-inverse;
}

.uni-calendar-item__weeks-lunar-text {
	/* #ifdef H5 */
	font-size: 12px;
	transform: scale(0.7);
	/* #endif */
	/* #ifndef H5 */
	font-size: 16rpx;
	/* #endif */
	color: $uni-text-color-inverse;
}

.uni-calendar-item__weeks-box-item {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100rpx;
	height: 100rpx;
}

.uni-calendar-item__weeks-box-circle {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background-color: $uni-color-error;
}

.uni-calendar-item--disable {
	// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
	color: $uni-text-color-disable;
}

.uni-calendar-item--isDay-text {
	color: $uni-text-color-inverse;
}

.uni-calendar-item--isDay {
	// background-color: $uni-color-primary;
	// opacity: 0.8;
	background: rgb(191, 168, 245);
	opacity: 0.7;
	// border-radius: 76px;
	color: #fff;
}

.uni-calendar-item--extra {
	color: $uni-text-color-inverse;
	// opacity: 0.8;
}

.uni-calendar-item--checked {
	// background-color: $uni-color-primary;
	background: rgb(191, 168, 245);
	opacity: 0.7;
	// border-radius: 76px;
	color: #fff;
	// opacity: 0.8;
}

.uni-calendar-item--multiple {
	// background-color: $uni-color-primary;
	background: rgb(191, 168, 245);
	opacity: 0.7;
	// border-radius: 76px;
	color: #fff;
	
}
.uni-calendar-item--before-checked {
	background-color: #ff5a5f;
	opacity:1;
	// border-radius: 76px 0 0 76px;
	color: #fff;
}
.uni-calendar-item--after-checked {
	background-color: #ff5a5f;
	opacity:1;
	// border-radius: 0 76px 76px 0;
	color: #fff;
}
</style>
